@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var;
  }
}

// ********************************************
.overflow-x-scroll {
  overflow-x: scroll; 
}
.overflow-y-scroll {
  overflow-y: scroll; 
}
.overflow-y-auto {
  overflow-y: auto; 
}
.overflow-x-hidden {
  overflow-x: hidden;
}

// Font ********************************************
.font-bold {
  font-weight: bold;
}

// boder-color ********************************************
// class  .border-b
// $orientation: (
//   t: top,
//   b: bottom,
//   l: left,
//   r: right,
// );
// @each $orientationKey, $orientationVal in $orientation {
//   .border-#{$orientationKey} {
//     border-#{$orientationVal}: 1px solid #e4e4ee;
//   }
// }

// *******************************************************
// border-radius
@for $i from 1 through 10 {
  @if ($i % 2 == 0) {
    // b-rd-6
    .b-rd-#{$i} {
      border-radius: #{$i}px;
    }
  }
}

.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}



.position-relative {
  position: relative; 
}
.position-absolute {
  position: absolute; 
}

//  eg: display-inline-block
@each $val in block, inline, inline-block {
  .display-#{$val} {
    display: #{$val};
  }
}
